<template>
	<div class="dia-box">
		<el-dialog v-model="dialogVisible" title="选择课程" width="45%">
			<div class="dialog-content">
				<div class="goods-tag">
					<div
						class="item"
						v-for="(item, index) in payGoodsList"
						:key="index"
					>
						<div>{{ item.courseName }}</div>
						<div class="icon" @click="removeCheckout(item, index)">
							<el-icon>
								<Close />
							</el-icon>
						</div>
					</div>
				</div>
				<div class="search-box">
					<!-- <div>学科分类</div>
					<div>
						<el-select
							v-model="selectGoodsState.courseClassify"
							placeholder="请选择"
							size="large"
						>
							<el-option
								v-for="item in goodCategorze"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</div> -->
					<div>课程名称</div>
					<div>
						<el-input
							placeholder=""
							v-model="selectGoodsState.goodsName"
						></el-input>
					</div>
					<div><el-button type="primary">搜索</el-button></div>
				</div>
				<div class="table-list">
					<div class="title">
						<div
							class="item"
							:style="title.style"
							v-for="(title, titIndex) in cloumn"
							:key="titIndex"
						>
							{{ title.label }}
						</div>
					</div>
					<div
						class="goods-item"
						v-for="(item, index) in selectGoodsState.goodsList"
						:key="index"
					>
						<div
							class="item"
							v-for="(item2, index2) in cloumn"
							:key="index2"
							:style="item2.style"
						>
							<div v-if="item2.type == 'btn'" class="btn">
								<span
									@click="selectGoods(item)"
									:style="
										goodsStatus(item.id)
											? 'color: #ff4a3f;'
											: 'color: #3faae2;'
									"
								>
									{{
										goodsStatus(item.id)
											? "【取消】"
											: "【选择】"
									}}
								</span>
							</div>
							<div v-else-if="item2.type == 'inp'" class="inp">
								<el-input
									placeholder=""
									v-model="item[item2.prop]"
								></el-input>
							</div>
							<div v-else>
								{{ item[item2.prop] }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="saveSelectGoods"
						>保存</el-button
					>
					<el-button type="danger" @click="dialogVisible = false"
						>取消</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, computed, defineEmits, defineExpose } from "vue";
import { Close } from "@element-plus/icons-vue";

const dialogVisible = ref(false);

const goodCategorze = ref([]);

const payGoodsList = ref([]);

const cloumn = computed(() => {
	return cloumnList.value.filter((f) => !f.hide);
});

const selectGoodsState = reactive({
	courseClassify: "",
	courseName: "",
	goodsList: [
		{
			isCheck: false,
			id: 1,
			courseName: "中医",
			goodsNo: "84359316732",
			courseCost: "500",
		},
	],
});
const cloumnList = ref([
	{
		prop: "",
		label: "操作",
		style: "flex: 1;",
		type: "btn",
		hide: false,
	},
	{
		prop: "courseName",
		label: "课程名称",
		style: "flex: 2.5;",
		type: "text",
		hide: false,
	},
	{
		prop: "period",
		label: "总课次",
		style: "flex: 2;",
		type: "text",
		hide: false,
	},
	{
		prop: "courseCost",
		label: "报名价",
		style: "flex: 1.5;",
		type: "text",
		hide: false,
	},
]);

// 添加商品弹窗选择、取消商品
const selectGoods = (item, index) => {
	const isCheckOutId = payGoodsList.value.map((m) => m.id);
	const isHave = isCheckOutId.indexOf(item.id);
	if (isHave == -1) {
		payGoodsList.value.push(item);
	} else {
		payGoodsList.value.splice(isHave, 1);
	}
};

// 添加商品弹窗移除已选商品
const removeCheckout = (item, index) => {
	const idArr = payGoodsList.value.map((m) => m.id);
	const isHave = idArr.indexOf(item.id);
	if (isHave !== -1) {
		payGoodsList.value.splice(isHave, 1);
	}
};

// 判断数据是是否是选中状态
const goodsStatus = (id) => {
	const idArr = payGoodsList.value.map((m) => m.id);
	const isHand = idArr.indexOf(id);
	if (isHand !== -1) {
		return true;
	} else {
		return false;
	}
};

const emit = defineEmits(["comfirm"]);

// 保存选择的商品
const saveSelectGoods = () => {
	let arr = JSON.parse(JSON.stringify(payGoodsList.value));
	emit("comfirm", arr);
	dialogVisible.value = false;
};

const openDialog = (arr) => {
	payGoodsList.value = JSON.parse(JSON.stringify(arr));
	dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
.dia-box {
	::v-deep .el-dialog__body {
		border-top: 1px solid #cfcfcf;
		padding: 10px 20px;
		max-height: 450px;
		overflow-y: auto;
	}
	::v-deep .el-dialog__footer {
		background: #f0f4f7;
		text-align: center;
		padding-top: 15px;
	}
	.dialog-content {
		.goods-tag {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 10px;
			.item {
				display: flex;
				align-items: center;
				height: 28px;
				line-height: 26px;
				border: 1px solid #1a76d3;
				padding-left: 5px;
				color: #3681d6;
				margin: 5px 5px 5px 0;
				.icon {
					cursor: pointer;
					margin-left: 3px;
					width: 25px;
					height: 26px;
					font-size: 15px;
					text-align: center;
					line-height: 30px;
					&:hover {
						background-color: #ff4a3f;
						color: #fff;
					}
				}
			}
		}
		.search-box {
			display: flex;
			align-items: center;
			padding-bottom: 10px;
			border-bottom: 1px solid #cfcfcf;
			& > div {
				margin-right: 15px;
				::v-deep .el-input__inner {
					height: 38px;
					line-height: 38px;
				}
			}
		}
		.table-list {
			margin-top: 10px;
			border-top: 1px solid #cecece;
			border-left: 1px solid #cecece;
			.title,
			.goods-item {
				display: flex;
				background-color: #e7e7e7;
				color: #192942;
				font-size: 14px;
				.item {
					text-align: center;
					border-right: 1px solid #cecece;
					border-bottom: 1px solid #cecece;
					height: 40px;
					line-height: 40px;
					.btn {
						span {
							cursor: pointer;
						}
					}
					.inp {
						padding: 0 5px;
						::v-deep .el-input__inner {
							height: 22px;
							line-height: 22px;
							text-align: center;
							font-size: 12px;
						}
					}
				}
			}
			.goods-item {
				background-color: #fff;
			}
		}
	}
}
</style>
